<template>
  <div>
    <group label-width="4.5em" label-margin-right="2em" label-align="right">
      <popup-picker title="员<i class='vux-blank-half'></i>工<i class='vux-blank-half'></i>号" placeholder="Id-Name" :data="namelist" v-model="name" value-text-align="left" @onHide="doSelect"></popup-picker>
      <datetime format="YYYY-MM" title="积分月度" v-model="time" value-text-align="left"></datetime>
      <x-input title="绩效分数" placeholder="必填" v-model="score1" required="true"></x-input>
      <x-input title="额外积分" placeholder="必填" v-model="score2" required="true"></x-input>
    </group>
    <div style="padding:15px;">
      <flexbox>
        <flexbox-item>
          <x-button @click.native="submitScoreAndBack();" type="primary">提 交</x-button>
        </flexbox-item>
      </flexbox>
    </div>
    <div>
      <cell title="历史记录" is-link :border-intent="false" :arrow-direction="showDetail ? 'up' : 'down'" @click.native="showDetail = !showDetail"></cell>
        <template v-if="showDetail">
          <div class="history-table">
            <table style="width:100%">
              <thead>
                <tr>
                  <th>员工号</th>
                  <th>分数类型</th>
                  <th>修改时间</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in historyList">
                  <td class="data-cell">{{item.staffId}}</td>
                  <td class="data-cell">{{item.scoretype}}</td>
                  <td class="data-cell">{{item.updatedtime}}</td>
                  <td class="data-cell" :class='"color"+item.status_color'>{{item.status}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </template>
    </div>
    <toast v-model="idStatus" type="text" width="10em">添加失败-请填写员工号</toast>
    <toast v-model="dataStatus" type="text" width="10em">添加失败-请填写日期</toast>
    <toast v-model="scoreStatus" type="text" width="12em">添加失败-请填写正确分数范围(0-100)整数</toast>
    <toast v-model="successTosat" type="text">添加成功</toast>
    <toast v-model="updateSuccess" type="text">修改成功</toast>
    <toast v-model="errorTosat" type="text" width="12em">操作失败-分数值填写类型异常，请输入数字</toast>
  </div>
</template>

<script>
  import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XSwitch, XButton, Toast, FlexboxItem, Flexbox } from 'vux'

  export default {
    components: {
      FlexboxItem,
      Flexbox,
      Group,
      GroupTitle,
      Cell,
      XInput,
      XButton,
      Selector,
      PopupPicker,
      Datetime,
      XSwitch,
      Toast
    },
    data: function () {
      var currentDate = new Date()
      var currentTimeStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1)
      var ms_staffId = localStorage.getItem('ms_staffId')
      return {
        staffMap: {},
        name: [],
        description: '',
        time: currentTimeStr,
        score1: '100',
        score2: '',
        dateList: [],
        namelist: [],
        list2: [],
        list: [],
        historyList: [],
        message: '',
        idStatus: false,
        dataStatus: false,
        scoreStatus: false,
        successTosat: false,
        updateSuccess:false,
        errorTosat: false,
        idAndName: '',
        userId: '',
        showDetail: false,
        staffIdOnLogin: ms_staffId
      }
    },
    mounted: function () {
      this.getUserId()
      this.getScoreHistory()
    },
    methods: {
      submitScore: function () {
        var self = this
        self.getdate()
        self.$ajax({
          method: 'post',
          url: '../wx/score/add',
          data: {
            staffId: self.name[0].split('(')[0],
            year: self.dateList[0],
            month: self.dateList[1],
            performanceScore: self.score1,
            additionalScore: self.score2
          }
        })
        .then(function (res) {
          console.log(res)
          self.message = res.message
          if (self.message === 'idError') {
            self.idStatus = true
          }
          if (self.message === 'dateError') {
            self.dataStatus = true
          }
          if (self.message === 'scoreError') {
            self.scoreStatus = true
          }
          if(self.message == 'updateSuccess'){
            self.updateSuccess = true
          }
          if (self.message === 'addSuccess') {
            self.name = []
            self.successTosat = true
            self.score1 = '100'
            self.score2 = ''
            self.getScoreHistory()
          }
        })
        .catch(function (err) {
          console.log(err)
          self.errorTosat = true
        })
      },
      getdate: function () {
        this.dateList = this.time.split('-')
      },
      getUserId: function () {
        var self = this
        self.$ajax({
          method: 'get',
          url: '../wx/user',
          params: {
            staffId: self.staffIdOnLogin
          }
        })
        .then(function (res) {
          var list = res.data
          var selectionList = []
          for (var i = 0; i < list.length; i++) {
            self.staffMap[list[i].staffId] = list[i].name
            selectionList.push(list[i].staffId + '(' + list[i].name + ')')
          }
          self.namelist.push(selectionList)
        })
        .catch(function (err) {
          console.log(err)
        })
      },
      submitScoreAndBack: function () {
        var self = this
        self.submitScore()
        if (self.successTosat) {
          self.$router.push('/rank?sel=2')
        }
      },
      getScoreHistory: function () {
        var self = this
        self.$ajax({
          method: 'get',
          url: '../wx/score/history',
          params: {
            departmentCode: '0101'
          }
        })
        .then(function (res) {
          self.historyList = res.data
        })
        .catch(function (err) {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="less">
.detial-form {
    padding: 10px 15px;
    font-size: .9em;
    text-align: right;
    color: #999999;
    line-height: 2;
}
.detial-form__label {
    float: left;
    margin-right: 1em;
    min-width: 4em;
    color: #999999;
    text-align: justify;
    text-align-last: justify;
}
.detial-form__value {
    display: block;
    overflow: hidden;
    word-break: normal;
    word-wrap: break-word;
}
.history-table {
  padding: 10px 15px;
  align: center;
}
.data-cell{
  text-align: center;
}
.color0{
  color: #6495ED;
}
.color1{
  color: #71C671;
}
</style>
